<template>
  <div>
    <lyg-navbar></lyg-navbar>
    <div class="container">

      <div class="message-container">
        <h1 class="message-title">留言板</h1>
        <div class="message-input">
          <input class="input" v-model="messageContent" @keyup.enter="send" placeholder="说点什么吧" />
          <button class="send" @click="send">发送</button>
        </div>
      </div>

      <div class="barrages-drop">
        <vue-baberrage
          :isShow="barrageIsShow"
          :barrageList="barrageList"
          :maxWordCount="maxWordCount"
          :throttleGap="throttleGap"
          :loop="barrageLoop"
          :boxHeight="boxHeight"
          :boxWidth="boxWidth"
          :messageHeight="messageHeight"
          :lanesCount="lanesCount"
          style="width:100%;height:300px;">
        </vue-baberrage>
      </div>
    </div>
  </div>
</template>

<script>
import header from '../../components/header.vue'
import articlelist from '../../components/articlelist.vue'
import rightlist from '../../components/rightlist.vue'
import {getMessageCont,sendMessageCont} from '../../api/message/message'
import {getUserInfo} from '../../api/user.js'//获取用户信息，保存用户信息
import { MESSAGE_TYPE } from 'vue-baberrage'
import avatar from '@/assets/logo.png';
export default {
  name: "barrage",
  components: {
    'lyg-navbar': header,
    'lyg-articlelist': articlelist,
    'lyg-rightlist': rightlist,
  },
  mounted() {
    this.addToList()
  },
  data() {
    return {
      barrageIsShow: true,    //是否展示弹幕
      messageHeight: 5,       //消息高度(测试不生效)
      barrageLoop: true,     //是否循环播放
      maxWordCount: 2,        //弹幕字数(测试不生效)
      lanesCount:2,           //固定弹幕(测试不生效)
      boxWidth:900,           //弹幕宽度
      boxHeight: 300,         //弹幕高度(测试不生效)
      throttleGap: 600,       //消息间隔
      barrageList: [],        //弹幕列表，格式为数组
      messageContent:'',
      mesStyleChoice:['yibai','erbai','sanbai','sibai','wubai','liubai','qibai','babai','jiubai','yiqian']
    }
  },
  methods: {
    end() {
      console.log(this.$refs.danmaku);
    },

    addToList() {
      this.barrageList=[]
      getMessageCont().then(res=>{
        res.forEach(item => {
          this.barrageList.push({
            id:item.id,                        //弹幕ID
            avatar: avatar,               //头像
            msg: item.mes,                     //弹幕消息
            time: item.mesTime,                   //屏幕展示时间
            type: MESSAGE_TYPE.NORMAL,      //类型
            barrageStyle:item.mesStyle     //自定义样式
          });
        });
      })
    },

    send(){
      let time = Math.floor(Math.random() * 9) + 2;
      let randomIndex = Math.floor(Math.random() *this.mesStyleChoice.length);
      let randomElement = this.mesStyleChoice[randomIndex];

      let sendData={
        mesAvatar: '@/assets/logo.png',        //头像
        mes: this.messageContent,                     //弹幕消息
        mesTime: time,                   //屏幕展示时间
        mesStyle:randomElement     //自定义样式
      };
      console.log(sendData)
      sendMessageCont(sendData).then(res=>{
        let aa=res;
        if (aa){
          this.$message.success("发送成功");
          this.addToList();
        }else{
          this.$message.warn("发送失败");
        }
      })
    }

  }
}
</script>

<style>

.message-container {
  /*position: fixed;*/
  top: 35%;
  left: 0;
  right: 0;
  width: 22.5rem;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  z-index: 5;
}

.message-title {
  animation: titleScale 1s;
  color: #299191;
  font-size: 20px;
}

.message-input {
  display: flex;
  justify-content: center;
  height: 2.5rem;
  margin-top: 0.5rem;
}

.message-input .input {
  width: 70%;
  height: 100%;
  border-radius: 1.25rem;
  border-bottom-color: #3effb1;
  padding: 0 1.25rem;
  outline: none;
  color: black;
  border: #fff 1px solid;
}

.message-input .input::-webkit-input-placeholder {
  color: #eeee;
}

.message-input .send {
  height: 100%;
  padding: 0 1.25rem;
  color: black;
  border: black 1px solid;
  border-radius: 20px;
  outline: none;
  animation: slideUpIn 0.3s;
}



.yibai{
  margin-top:10px;
}
.erbai{
  margin-top:60px;
}
.sanbai{
  margin-top:90px;
}
.sibai{
  margin-top:120px;
}
.wubai{
  margin-top:150px;
}
.liubai{
  margin-top:180px;
}
.qibai{
  margin-top:100px;
}
.babai{
  margin-top:110px;
}
.jiubai{
  margin-top:240px;
}
.yiqian{
  margin-top:220px;
}
</style>
